<template>
	
	<div>
		<h1>我是home的子组件</h1>
	<!-- 	<h1 class="two">我是home的子组件</h1> -->
		<p class="nav">
			<b v-for="(x,index) in 3" :class="{on:curIndex==index}" @click="curIndex=index">tab{{x}}</b>
		</p>
		<section>
			<p v-if="curIndex==0" style="background: red;">1</p>
			<p v-else-if="curIndex==1"  style="background: blue;">2</p>
			<p v-else style="background: yellow;">3</p>
		</section>
	</div>
	
</template>

<script setup>
import { ref } from 'vue';
	let curIndex=ref(0)
</script>
<!--
<script>
	export default{
		props:["user"],
		data(){
			return{
				
			}
		}
	}
</script>
-->
<style>
	.nav .on{
		background: #333;
		color: #fff;
	}
	section{
		width: 200px;
		height: 200px;
	}
	section p{
		width: 200px;
		height: 200px;
	}
</style>